<script lang="ts">

import UserAccountCard from "/src/views/manage/talent/emp/components/UserAccountCard.vue";

export default {
  components: {UserAccountCard},
  data() {
    return {
      // 显示
      show: false,
      // 门类数据
      lv0Data: [],
      // 选中的门类
      lv0DataSelected: {
        id: "",
        children: []
      },
      // 选中一级专业数据
      lv1Data: [],
      // 选中的一级专业
      lv1DataSelected: {
        id: "",
        children: []
      },
      // 选中的二级专业
      lv2Data: [],
      // 当前用户的技能等级经历
      currentSeriesSkillLevelExperiences: [],
      // 当前用户的职称等级经历
      currentTitleLevelExperiences: [],
      // 当前用户的人才等级经历
      currentExpertLevelExperiences: [],
      requestParam: {
        "eduMajorDegrees": [{
          "degreeMajorCode": "03",
          "gmtCreate": null,
          "gmtModified": null,
          "id": 1,
          "userAccountId": 579809487052805
        }, {
          "degreeMajorCode": "01",
          "gmtCreate": null,
          "gmtModified": null,
          "id": 2,
          "userAccountId": 579809487052805
        }],
        "seriesWorkExperiences": [],
        "talentAwardsOfUserAccount": [{
          "gmtCreate": null, "gmtGet": null, "gmtModified": null, "grade": 1, "id": 1, "rank": 1,
          "talentAward": {
            "description": null,
            "gmtCreate": null,
            "gmtModified": null,
            "id": 1,
            "isHasGrade": true,
            "isHasRank": false,
            "name": "国家科技进步奖"
          }, "talentAwardId": 1, "userAccountId": 579809487052805
        }],
        "talentPlansOfUserAccount": [{
          "gmtCreate": null,
          "gmtModified": null,
          "gmtParticipate": 1724487337000,
          "id": 1,
          "talentPlan": {
            "desc": null,
            "gmtCreate": null,
            "gmtModified": null,
            "id": 1,
            "name": "“百千万人才工程”国家级人选"
          },
          "talentPlanId": 1,
          "userAccountId": 579809487052805
        }, {
          "gmtCreate": null,
          "gmtModified": null,
          "gmtParticipate": 1723709743000,
          "id": 2,
          "talentPlan": {
            "desc": null,
            "gmtCreate": null,
            "gmtModified": null,
            "id": 2,
            "name": "“国家高层次人才特殊支持计划”人选"
          },
          "talentPlanId": 2,
          "userAccountId": 579809487052805
        }, {
          "gmtCreate": null,
          "gmtModified": null,
          "gmtParticipate": 1723623302000,
          "id": 3,
          "talentPlan": {
            "desc": null,
            "gmtCreate": null,
            "gmtModified": null,
            "id": 3,
            "name": "“创新人才推进计划”中青年领军人才"
          },
          "talentPlanId": 3,
          "userAccountId": 579809487052805
        }],
        // 技能等级经历
        "talentSkillLevelExperiencesOfUserAccount": [{
          "gmtCreate": null,
          "gmtModified": null,
          "gmtStart": null,
          "seriesId": "",
          "skillLevelId": "",
          "userAccountId": ""
        }],
        // 职称等级经历
        "talentTitleLevelExperiencesOfUserAccount": [{
          "gmtCreate": null,
          "gmtModified": null,
          "gmtStart": null,
          "seriesId": "",
          "titleLevelId": "",
          "userAccountId": ""
        }],
        // 人才等级经历
        "talentExpertLevelExperiencesOfUserAccount": [{
          "gmtCreate": null,
          "gmtModified": null,
          "gmtStart": null,
          "seriesId": "",
          "talentLevelId": "",
          "userAccountId": ""
        }],
        "userAccountIdOfInviter": null,
        "userAccountOfInviter": null,
        "userAccountOnline": null,
        "username": null
      }
    }
  },
  watch: {
    "requestParam.gmtCurrentWorkSeriesStart": {
      handler(newValue) {
        // 修改当前技能等级id为1
        this.requestParam.currentSkillLevelId = 1;
        // 如果为空
        if (!newValue) {
          return;
        }
        if (newValue && !isNaN(newValue)) {
          this.requestParam.gmtCurrentWorkSeriesStart = new Date(newValue).getTime();
        } else {
          this.requestParam.gmtCurrentWorkSeriesStart = new Date().getTime();
        }
      },
      immediate: true
    },
    // 生日
    "requestParam.gmtBirthday": {
      handler(newValue) {
        // 如果为空
        if (!newValue) {
          return;
        }
        if (newValue && !isNaN(newValue)) {
          this.requestParam.gmtBirthday = new Date(newValue).getTime();
        } else {
          this.requestParam.gmtBirthday = new Date().getTime();
        }
      },
      immediate: true
    },
    // 入学时间
    "requestParam.gmtEduStart": {
      handler(newValue) {
        // 如果为空
        if (!newValue) {
          return;
        }
        if (newValue && !isNaN(newValue)) {
          this.requestParam.gmtEduStart = new Date(newValue).getTime();
        } else {
          this.requestParam.gmtEduStart = new Date().getTime();
        }
      },
      immediate: true
    },
    // 当前技能等级获取时间
    "requestParam.gmtCurrentSkillLevelStart": {
      handler(newValue) {
        // 如果为空
        if (!newValue) {
          return;
        }
        if (newValue && !isNaN(newValue)) {
          this.requestParam.gmtCurrentSkillLevelStart = new Date(newValue).getTime();
        } else {
          this.requestParam.gmtCurrentSkillLevelStart = new Date().getTime();
        }
      },
      immediate: true
    },
    // 当前专家等级获取时间
    "requestParam.gmtCurrentExpertLevelStart": {
      handler(newValue) {
        // 如果为空
        if (!newValue) {
          return;
        }
        if (newValue && !isNaN(newValue)) {
          this.requestParam.gmtCurrentExpertLevelStart = new Date(newValue).getTime();
        } else {
          this.requestParam.gmtCurrentExpertLevelStart = new Date().getTime();
        }
      },
      immediate: true
    },
    // 当前职称等级获取时间
    "requestParam.gmtCurrentTitleLevelStart": {
      handler(newValue) {
        // 如果为空
        if (!newValue) {
          return;
        }
        if (newValue && !isNaN(newValue)) {
          this.requestParam.gmtCurrentTitleLevelStart = new Date(newValue).getTime();
        } else {
          this.requestParam.gmtCurrentTitleLevelStart = new Date().getTime();
        }
      },
      immediate: true
    },
    "requestParam.talentPlansOfUserAccount": {
      handler(newValue) {
        // 如果requestParam.talentPlansOfUserAccount不等于空
        if (newValue && newValue.length > 0) {
          for (let i = 0; i < newValue.length; i++) {
            // 如果参与时间不为空
            if (newValue[i].gmtParticipate) {
              // 如果参与时间不为空
              if (newValue[i].gmtParticipate && !isNaN(newValue[i].gmtParticipate)) {
                newValue[i].gmtParticipate = new Date(newValue[i].gmtParticipate).getTime();
              } else {
                newValue[i].gmtParticipate = new Date().getTime();
              }
            }
          }
        }
      },
      immediate: true,
      deep: true
    },
    "requestParam.talentAwardsOfUserAccount": {
      handler(newValue) {
        // 如果requestParam.talentAwardsOfUserAccount不等于空
        if (newValue && newValue.length > 0) {
          for (let i = 0; i < newValue.length; i++) {
            // 如果获得时间不为空
            if (newValue[i].gmtGet) {
              // 如果获得时间不为空
              if (newValue[i].gmtGet && !isNaN(newValue[i].gmtGet)) {
                newValue[i].gmtGet = new Date(newValue[i].gmtGet).getTime();
              } else {
                newValue[i].gmtGet = new Date().getTime();
              }
            }
          }
        }
      },
      // 监听
      immediate: true,
      // 深度监听
      deep: true
    },
    // 技能等级经历监听
    "requestParam.talentSkillLevelExperiencesOfUserAccount": {
      handler(newValue) {
        // 如果requestParam.talentSkillLevelExperiencesOfUserAccount不等于空
        if (newValue && newValue.length > 0) {
          for (let i = 0; i < newValue.length; i++) {
            // 如果开始时间不为空
            if (newValue[i].gmtStart && newValue[i].seriesId == this.requestParam.currentWorkSeriesId) {
              // 如果开始时间不为空
              if (newValue[i].gmtStart && !isNaN(newValue[i].gmtStart)) {
                newValue[i].gmtStart = new Date(newValue[i].gmtStart).getTime();
              } else {
                newValue[i].gmtStart = new Date().getTime();
              }
            }
          }
        }
      },
      // 监听
      immediate: true,
      // 深度监听
      deep: true
    },
    // 职称经历监听
    "requestParam.talentTitleLevelExperiencesOfUserAccount": {
      handler(newValue) {
        // 如果requestParam.talentTitleLevelExperiencesOfUserAccount不等于空
        if (newValue && newValue.length > 0) {
          for (let i = 0; i < newValue.length; i++) {
            // 如果开始时间不为空
            if (newValue[i].gmtStart && newValue[i].seriesId == this.requestParam.currentWorkSeriesId) {
              // 如果开始时间不为空
              if (newValue[i].gmtStart && !isNaN(newValue[i].gmtStart)) {
                newValue[i].gmtStart = new Date(newValue[i].gmtStart).getTime();
              } else {
                newValue[i].gmtStart = new Date().getTime();
              }
            }
          }
        }
      },
      // 监听
      immediate: true,
      // 深度监听
      deep: true
    },
    // 专家经历监听
    "requestParam.talentExpertLevelExperiencesOfUserAccount": {
      handler(newValue) {
        // 如果requestParam.talentExpertLevelExperiencesOfUserAccount不等于空
        if (newValue && newValue.length > 0) {
          for (let i = 0; i < newValue.length; i++) {
            // 如果开始时间不为空
            if (newValue[i].gmtStart && newValue[i].seriesId == this.requestParam.currentWorkSeriesId) {
              // 如果开始时间不为空
              if (newValue[i].gmtStart && !isNaN(newValue[i].gmtStart)) {
                newValue[i].gmtStart = new Date(newValue[i].gmtStart).getTime();
              } else {
                newValue[i].gmtStart = new Date().getTime();
              }
            }
          }
        }
      },
      // 监听
      immediate: true,
      // 深度监听
      deep: true
    }
  },
  created() {
    this.lv0Data = this.$talent.get.getEduMajorListHasChildren();
    this.currentSeriesSkillLevelExperiences = []
    this.currentTitleLevelExperiences = []
     this.currentExpertLevelExperiences = []

  },
  mounted() {
    // 监听#intoIframe的消息
    window.addEventListener("message", (event) => {
      if (event.data.type === "saveSuccess") {
        this.$emit("save");
        // 关闭弹窗
        this.close();
      }
      if (event.data.type === "cancel") {
        // 关闭弹窗
        this.close();
      }
    });
    // cancel
    },
  methods: {
    // 选择计划
    talentPlanSelectChange(id, item) {
      // 如果计划id为空
      console.log(id, item)

    }
    ,
    // 移除计划
    removePlan(index) {
      // this.requestParam.talentPlansOfUserAccount = this.requestParam.talentPlansOfUserAccount.filter(item => item.id !== selectedItem.id);
      let talentPlansOfUserAccount = [];
      for (let i = 0; i < this.requestParam.talentPlansOfUserAccount.length; i++) {
        if (i !== index) {
          talentPlansOfUserAccount.push(this.requestParam.talentPlansOfUserAccount[i]);
        }
      }
      this.requestParam.talentPlansOfUserAccount = talentPlansOfUserAccount;
    }
    ,
    // 移除奖项
    removeAward(index) {
      let talentAwardsOfUserAccount = [];
      for (let i = 0; i < this.requestParam.talentAwardsOfUserAccount.length; i++) {
        if (i !== index) {
          talentAwardsOfUserAccount.push(this.requestParam.talentAwardsOfUserAccount[i]);
        }
      }
      this.requestParam.talentAwardsOfUserAccount = talentAwardsOfUserAccount;
    }
    ,
    // 保存
    save() {
      // 未选择头像
      if (!this.requestParam.fileIdOfAvatar) {
        this.$message.error("请上传头像");
        return;
      }
      // 未选择性别
      if (!this.requestParam.genderCode) {
        this.$message.error("请选择性别");
        return;
      }
      // 未选择工作系列
      if (!this.requestParam.currentWorkSeriesId) {
        this.$message.error("请选择工作系列");
        return;
      }
      // 未输入姓名
      if (!this.requestParam.realName) {
        this.$message.error("请输入姓名");
        return;
      }
      // 未输入手机号
      if (!this.requestParam.phone) {
        this.$message.error("请输入手机号");
        return;
      }
      // 未输入手机区号，默认成86
      if (!this.requestParam.phoneAreaCode) {
        this.requestParam.phoneAreaCode = "86";
      }

      let loading = this.$loading({
        lock: true,
        text: '保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      this.$kt.requestSecurity.send({
        uri: "/business-talent-web/admin/userAccount/save",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$message.success("保存成功");
          this.$emit("save");
          loading.close();
          this.close();
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          loading.close();
        }
      });
    }
    ,
    open(userAccount) {
      this.requestParam = JSON.parse(JSON.stringify(userAccount));
      this.initSelectLv0Data()
      if (this.requestParam.eduMajorCode) {
        console.log("当前的二级专业", this.requestParam.eduMajorCode)
        this.initLv0DataForUser(this.requestParam.eduMajorCode)
      }
      this.filterCurrentSeriesLevelExperiences()
      this.show = true;
    }
    ,
    close() {
      this.show = false;
    }
    ,
    // 上传图片
    uploadImg() {


      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "userAccountAvatar",
          stateSuccess: (res) => {
            this.requestParam.fileIdOfAvatar = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            this.$message.error(res.errMsg);
          }
        });
      });
    }
    ,
    initLv0DataForUser(code) {
      if (!code) {
        return;
      }

      const eduMajorL2 = this.$talent.get.getEduMajorByLv2Code(code);
      const {lv0Code, lv1Code} = eduMajorL2;

      // 查找门类
      const eduMajorL0 = this.lv0Data.find(item => item.code === lv0Code);
      if (!eduMajorL0) return; // 如果找不到，退出

      // 设置选中的门类
      this.lv0DataSelected = {
        id: eduMajorL0.id,
        children: eduMajorL0.children
      };

      // 查找一级专业
      const eduMajorL1 = this.lv0DataSelected.children.find(item => item.code === lv1Code);
      if (!eduMajorL1) return; // 如果找不到，退出

      // 设置选中的一级专业
      this.lv1DataSelected = {
        id: eduMajorL1.id,
        children: eduMajorL1.children
      };

      // 更新数据
      this.lv1Data = this.lv0DataSelected.children;
      this.lv2Data = this.lv1DataSelected.children;

    }
    ,
    initSelectLv0Data() {
      this.lv0DataSelected = []
      this.lv1DataSelected = []
      this.lv2Data = []
    }
    ,
    //选择工作系列
    selectWorkSeries(id) {
      this.requestParam.currentWorkSeriesId = id;
      this.requestParam.currentTitleLevelId = "";
      this.filterCurrentSeriesLevelExperiences()

    }
    ,
    // 选择门类
    selectLv0Data(id) {
      // 初始化选择一级专业数据
      this.initSelectLv0Data()
      // 选中的门类
      this.lv0DataSelected.id = id
      // 选中的门类的子类
      this.lv0DataSelected.children = this.lv0Data.find(item => item.id === id).children;
      // 一级专业数据
      this.lv1Data = this.lv0DataSelected.children;
    }
    ,
    initSelectLv1Data() {
      this.lv1DataSelected = []
      this.lv2Data = []
    }
    ,
    //选择一级专业
    selectLv1Data(id) {
      // 初始化选择二级专业数据
      this.initSelectLv1Data()
      // 选中的一级专业
      this.lv1DataSelected.id = id
      // 选中的一级专业的子类
      this.lv1DataSelected.children = this.lv1Data.find(item => item.id === id).children;
      // 二级专业数据
      this.lv2Data = this.lv1DataSelected.children;
    }
    ,
    // 添加用户人才计划
    addUserTalentPlan() {
      if (!this.requestParam.talentPlansOfUserAccount) {
        this.requestParam.talentPlansOfUserAccount = [];
      }
      this.requestParam.talentPlansOfUserAccount.push({
        userAccountId: this.requestParam.id,
        talentPlanId: "",
        gmtParticipate: "",
        talentPlan: {
          name: "未选择",
        }
      });
    }
    ,
    // 添加用户奖项
    addUserAward() {
      if (!this.requestParam.talentAwardsOfUserAccount) {
        this.requestParam.talentAwardsOfUserAccount = [];
      }
      this.requestParam.talentAwardsOfUserAccount.push({
        userAccountId: this.requestParam.id,
        talentAwardId: "",
        gmtGet: "",
        talentAward: {
          name: "未选择",
        },
        rank: "",
        grade: ""
      });
    }
    ,
    // 添加绩效
    addUserPerformance() {
      if (!this.requestParam.talentPerformancesOfUserAccount) {
        this.requestParam.talentPerformancesOfUserAccount = [];
      }
      this.requestParam.talentPerformancesOfUserAccount.push({
        userAccountId: this.requestParam.id,
        year: "",
        score: "",
      });
    }
    ,
    // 添加技能等级经历
    addSkillLevelExperience() {
      // 判断当前系列是否为空
      if (!this.requestParam.currentWorkSeriesId) {
        this.$message.error("请先选择工作系列");
        return;
      }
      // 初始化
      if (!this.requestParam.talentSkillLevelExperiencesOfUserAccount) {
        this.requestParam.talentSkillLevelExperiencesOfUserAccount = [];
      }
      this.requestParam.talentSkillLevelExperiencesOfUserAccount.push({
        userAccountId: this.requestParam.id,
        seriesId: this.requestParam.currentWorkSeriesId,
        skillLevelId: "",
        gmtStart: "",
      });
      this.filterCurrentSeriesLevelExperiences()
    },
    // 删除removeSkillLevelExperiences
    removeSkillLevelExperiences(delItem) {
      //根据实体删除delItem.id 和 delItem.seriesId
      for (let i = 0; i < this.requestParam.talentSkillLevelExperiencesOfUserAccount.length; i++) {
        if (this.requestParam.talentSkillLevelExperiencesOfUserAccount[i].id === delItem.id && this.requestParam.talentSkillLevelExperiencesOfUserAccount[i].seriesId === delItem.seriesId) {
          this.requestParam.talentSkillLevelExperiencesOfUserAccount.splice(i, 1);
          break;
        }
      }
      this.filterCurrentSeriesLevelExperiences()

    },
    // 过滤当前系列技能等级记录
    filterCurrentSeriesLevelExperiences() {
      // 技能等级过滤
      if (this.requestParam.talentSkillLevelExperiencesOfUserAccount) {
        this.currentSeriesSkillLevelExperiences = this.requestParam.talentSkillLevelExperiencesOfUserAccount.filter(item => item.seriesId === this.requestParam.currentWorkSeriesId);
      }
      // 职称等级过滤
      if (this.requestParam.talentTitleLevelExperiencesOfUserAccount) {
        this.currentTitleLevelExperiences = this.requestParam.talentTitleLevelExperiencesOfUserAccount.filter(item => item.seriesId === this.requestParam.currentWorkSeriesId);
      }

      //专家人才等级过滤
      if (this.requestParam.talentExpertLevelExperiencesOfUserAccount) {
        this.currentExpertLevelExperiences = this.requestParam.talentExpertLevelExperiencesOfUserAccount.filter(item => item.seriesId === this.requestParam.currentWorkSeriesId);
      }
    },
    // 添加职称经历
    addTitleLevelExperience() {
      // 判断当前系列是否为空
      if (!this.requestParam.currentWorkSeriesId) {
        this.$message.error("请先选择工作系列");
        return;
      }
      // 初始化
      if (!this.requestParam.talentTitleLevelExperiencesOfUserAccount) {
        this.requestParam.talentTitleLevelExperiencesOfUserAccount = [];
      }
      this.requestParam.talentTitleLevelExperiencesOfUserAccount.push({
        userAccountId: this.requestParam.id,
        seriesId: this.requestParam.currentWorkSeriesId,
        titleLevelId: "",
        gmtStart: "",
      });
      this.filterCurrentSeriesLevelExperiences()
    }
    ,
    //删除删除removeTitleLevelExperiences
    removeTitleLevelExperiences(delItem) {
      //根据实体删除delItem.id 和 delItem.seriesId
      for (let i = 0; i < this.requestParam.talentTitleLevelExperiencesOfUserAccount.length; i++) {
        if (this.requestParam.talentTitleLevelExperiencesOfUserAccount[i].titleLevelId === delItem.titleLevelId && this.requestParam.talentTitleLevelExperiencesOfUserAccount[i].seriesId === delItem.seriesId) {
          this.requestParam.talentTitleLevelExperiencesOfUserAccount.splice(i, 1);
        }
      }
      this.filterCurrentSeriesLevelExperiences()
    },
    //添加人才技能等级经历
    addSkillLevelExperienceOfUser() {
      // 判断当前系列是否为空
      if (!this.requestParam.currentWorkSeriesId) {
        this.$message.error("请先选择工作系列");
        return;
      }
      // 初始化
      if (!this.requestParam.talentExpertLevelExperiencesOfUserAccount) {
        this.requestParam.talentExpertLevelExperiencesOfUserAccount = [];
      }
      this.requestParam.talentExpertLevelExperiencesOfUserAccount.push({
        userAccountId: this.requestParam.id,
        seriesId: this.requestParam.currentWorkSeriesId,
        expertLevelId: "",
        gmtStart: "",
        gmtEnd: ""
      });
      this.filterCurrentSeriesLevelExperiences()
    }
    ,
    //删除
    removeSkillLevelExperiencesOfUser(delItem) {
      //根据实体删除delItem.id 和 delItem.seriesId
      for (let i = 0; i < this.requestParam.talentExpertLevelExperiencesOfUserAccount.length; i++) {
        if (this.requestParam.talentExpertLevelExperiencesOfUserAccount[i].expertLevelId === delItem.expertLevelId && this.requestParam.talentExpertLevelExperiencesOfUserAccount[i].seriesId === delItem.seriesId) {
          this.requestParam.talentExpertLevelExperiencesOfUserAccount.splice(i, 1)
        }
      }
      this.filterCurrentSeriesLevelExperiences()
    }

  }

}
</script>

<template>
  <el-dialog
      v-model="show"
             width="400px"
             title="编辑 员工用户">

    <div style="text-align: center">
      <div class="iframe-box">
        <iframe class="iframe" :src="`${$kt.request.getRootAddress()}/phoneIframe/index.html/#/pages/inAdmin/updateInfoInAdmin?userInfoJsonStr=${JSON.stringify(requestParam)}`"></iframe>
      </div>
    </div>

  </el-dialog>
</template>

<style scoped lang="scss">
.upload-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  cursor: pointer;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  border-radius: 0 0 20px 20px;
}

.upload-btn:hover {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.upload-btn:active {
  font-size: 10px;
}

.plan-box {
  width: 100%;
  // 超出不换行
  white-space: nowrap;

  .plan-item {
    position: relative;
    display: inline-block;
    width: 200px;
    border: 2px solid #aaaaaa;
    padding: 25px;
    text-align: center;
    border-radius: 10px;
    margin-right: 20px;

    .delete-icon {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      //旋转45度
      transform: rotate(45deg);
    }
  }

  .plan-item-select {
    opacity: 1;
  }
}

.Awards-box {
  width: 100%;
  white-space: nowrap;

  .Awards-item {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 100%;
    border: 2px solid #aaaaaa;
    padding: 25px;
    text-align: center;
    border-radius: 10px;
    margin-right: 20px;

    .delete-icon {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      //旋转45度
      transform: rotate(45deg);

    }

  }
}

.Performance-box {
  width: 100%;
  white-space: nowrap;

  .Performance-item {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 100%;
    border: 2px solid #aaaaaa;
    padding: 25px;
    text-align: center;
    border-radius: 10px;
    margin-right: 20px;

    .delete-icon {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      //旋转45度
      transform: rotate(45deg);

    }
  }
}

.level-box {
  width: 100%;
  white-space: nowrap;

  .level-item {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 100%;
    border: 2px solid #aaaaaa;
    padding: 25px;
    text-align: center;
    border-radius: 10px;
    margin-right: 20px;

    .delete-icon {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      //旋转45度
      transform: rotate(45deg);
    }
  }

}

.iframe-box{
  display: inline-block;
  padding: 5px;
  width: auto;
  border-radius: 20px;
}

.iframe{
  width: 300px;
  height: 600px;
  border: 10px solid #000000;
  border-radius: 20px;
}

</style>